<template>
  <el-dialog :title="formTitle" v-model="formVisible" width="35%">
    <el-form label-position="left" label-width="80px" :model="formData">
      <el-form-item label="ID">
        <span>{{ formData.id }}</span>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formData.name" :disabled="formTitle === '查看'"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.address" :disabled="formTitle === '查看'"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="formVisible = false">
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from 'vue';

export default {
  name: 'DialogForm',
  setup() {
    const formVisible = ref(false);
    const formTitle = ref('');
    const formData = ref({});

    const show = (row, type) => {
      formData.value = JSON.parse(JSON.stringify(row));
      // type (0: 查看 1: 编辑)
      if (type === 0) {
        formTitle.value = '查看';
      } else {
        formTitle.value = '编辑';
      }
      formVisible.value = true;
    };
    return {
      formVisible,
      formTitle,
      formData,
      show,
    };
  },
};
</script>
<style lang="scss" scoped></style>
